<template>
    <div id="app">
        <h2>{{ msg }}</h2>
        <input type="text" v-model="item" v-on:keyup.enter="addtext">
        <button v-on:click="addtext">增加</button>
        <ul>
            <li v-for="(todo,index) in todos" :id="index" v-bind:class="{del:todo.done}">
                <label>{{ index +1 }}.{{ todo.value }}</label>
                <time>{{todo.created|date}}</time>
            </li>
        </ul>
        <todo :message="todos.length" :done="finish"></todo>
    </div>
</template>

<script>
    import todo from './todo.vue'
    export default {
        name: 'app',
        components: {todo},
        data () {
            return {
                msg: 'vue-todos',
                item: '',
                todos: [
                    {value: "阅读一本关于前段开发的书", done: false, created: Date.now()},
                    {value: "补充范例代码", done: true, created: Date.now()},
                    {value: "写心得", done: false, created: Date.now()},
                ]
            }
        },
        filters: {
            date(val) {
                return new Date(val).getHours() + ":" + new Date(val).getMinutes() + ":" + new Date(val).getSeconds();
            }
        },
        methods: {
            addtext: function () {
                this.todos.push({value: this.item, done: false, created: Date.now()});
            }
        },
        computed: {
            finish: function () {
                var count = 0;
                for (var i = 0; i < this.todos.length; i++) {
                    if (this.todos[i].done) {
                        count++;
                    }
                }
                return count;
            }
        }
    }
</script>
<style>.del {
    text-decoration: line-through
}</style>

